<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
        "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
    <title>HTML文字滚动效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }

        .box {
            width: 500px;
            border: 3px solid #ccc;
            margin: 50px auto 0;
            padding: 10px;
        }

        dl, dt {
            list-style: none;
        }

        dl dt {
            line-height: 24px;
            font-size: 16px;
            font-weight: bold;
            color: #000;
        }
    </style>
</head>

<body>
<div class="box">
    <dl>
        <dt>文字滚动示例（默认）：</dt>
        <dd>
            <marquee>我默认向左滚。。。。。</marquee>
        </dd>
    </dl>
    <dl>
        <dt>文字滚动示例（向右）：</dt>
        <dd>
            <marquee direction="right" scrolldelay="500">我向右滚动。。。。</marquee>
        </dd>
    </dl>
    <dl>
        <dt>文字滚动示例（默认方向，滚动方式为alternate，循环3次，速度为2）：</dt>
        <dd>
            <marquee scrollamount="2" behavior="alternate" loop="3">我来回滚动。。。。</marquee>
        </dd>
    </dl>
    <dl>
        <dt>文字滚动示例（向上，背景色为#CCFF66，设置了背景宽度和高度）：</dt>
        <dd>
            <marquee direction="up" bgcolor="#CCFF66" width="250" height="55">我在区域内滚动，向上哟。。。。</marquee>
        </dd>
    </dl>

</div>
</body>
</html>
